<template>
  <el-dialog title="处理" width="35%" v-model="props.showDialog" align-center>
    <el-row>
      <el-col class="title"
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类型:<span style="padding-left: 40px">{{
          props.date.type
        }}</span></el-col
      >
      <el-col class="title">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;编号:<span style="padding-left: 40px">{{
          props.date.clueId
        }}</span></el-col
      >
      <el-col class="title"
        >创建日期:<span style="padding-left: 40px">{{ props.date.createTime }}</span></el-col
      >
      <el-col class="title"
        >用户编号:<span style="padding-left: 40px">{{ props.date.userId }}</span></el-col
      >
      <el-col class="title"
        >减员姓名:<span style="padding-left: 40px">{{ props.date.userName }}</span></el-col
      >
      <el-col class="title"
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;详情:<span style="padding-left: 40px">{{
          props.date.info
        }}</span></el-col
      >
    </el-row>
    <el-form :rules="formRules" ref="DialogForm" :model="props.date">
      <el-row>
        <el-form-item prop="deptName" style="padding-left: 45px" label="请选择部门:">
          <el-select
            v-model="props.date.deptName"
            size="large"
            style="width: 300px"
            clearable
            @change="getName"
            placeholder="请输入"
          >
            <el-option v-for="item in List" :key="item.id" :value="item.content" />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item prop="personal" style="padding-left: 45px" label="请选择人员:">
          <el-select
            v-model="props.date.personal"
            size="large"
            style="width: 300px"
            clearable
            placeholder="请输入"
          >
            <el-option v-for="item in nameList" :key="item" :value="item" />
          </el-select>
        </el-form-item>
      </el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button round @click="btnCanel" size="large" style="width: 80px">取消</el-button>

        <el-button
          round
          @click="BtnOK"
          size="large"
          style="width: 80px; background-color: #05cd95; color: #fff"
        >
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { defineProps, defineEmits, onMounted, ref, reactive } from 'vue'
import { cxTabelCourse } from '@/api/course.js'
import { ElMessage } from 'element-plus'
import { getUserBydeptName, saveTransfer } from '@/api/transfer.js'
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  date: {
    type: Object
  }
})
const formRules = reactive({
  deptName: [{ required: true, message: '部门未选择', trigger: 'blur' }],
  personal: [{ required: true, message: '人员未选择', trigger: 'blur' }]
})
// 部门数据
const List = ref([])
// 获取部门列表
const departmentList = async () => {
  const { data } = await cxTabelCourse(18)
  List.value = data
}
onMounted(async () => {
  departmentList()
})
// 获取人员姓名
const nameList = ref(null)
const getName = async () => {
  const { data } = await getUserBydeptName(props.date.deptName)
  nameList.value = data
}

// 取消
const emits = defineEmits(['close'])
const DialogForm = ref(null)
const btnCanel = () => {
  emits('close', false)
  DialogForm.value.resetFields()
}

// 确认
const BtnOK = async () => {
  await DialogForm.value.validate()
  try {
    await saveTransfer(props.date)
    ElMessage({
      message: '分配成功',
      type: 'success'
    })
  } catch (err) {
    ElMessage.error(err)
  }
  btnCanel()
}
</script>
<style lang="less" scoped>
.title {
  padding-left: 50px;
  font-size: 16px;
  padding-bottom: 15px;
}
::v-deep .el-dialog__header {
  border-bottom: 1px solid #ccc;
  margin-right: 0;
}
</style>
